<template>
  <view class="waterNeed">
    <nav-bar title="上报记录" leftArrow>
      <template #right>
        <van-button @click="goLink('created')" icon="plus" plain type="primary" size="small">需水上报</van-button>
      </template>
    </nav-bar>

    <van-pull-refresh class="van-pull-refresh-page-with-nav" v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="universal-list-list"
      >
        <van-cell v-for="item in list" :key="item">
          <view class="universal-list-item" @click="goLink('detail', item)">
            <view class="universal-list-head">
              <view class="universal-list-title">{{ item.projectItemName }}</view>
              <view class="universal-list-status">{{ item.reportNo || '-' }}</view>
            </view>
            <view class="universal-list-main">
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">需水面积：</view>
                <view class="universal-list-detail-cont">{{ item.areaDemand || 0 }}亩</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">预计需水量：</view>
                <view class="universal-list-detail-cont">{{ item.waterDemand || 0 }}m³</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">上报人：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="item.createName || '-'" />
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">上报时间：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="item.reportTime || '-'" />
              </view>
            </view>
            <view class="universal-list-footer">
              <view class="universal-list-footer-tag">来源：{{ item.reportSource.label || '-' }}</view>
              <view class="universal-list-footer-button">
                详情<van-icon name="arrow" />
              </view>
            </view>
          </view>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { apiWaterNeedRecord } from '@/api/waterNeed';

  const path = defineProps({
    id: String
  })
  let params = {
    demandId: path.id,
    pageNum: 1,
    pageSize: 10
  };
  let totalPages = {};

  let list = ref([]);

  const refreshing = ref(false);
  const loading = ref(false);
  const finished = ref(false);

  const getWaterNeedRecord = () => {
    apiWaterNeedRecord(params).then(res => {
      setList(res);
    })
  }

  const onLoad = () => { 
    getWaterNeedRecord();
  };
  const onRefresh = () => { 
    params.pageNum = 1;
    onLoad();
  };
  const goLink = (type, options) => {
    if (type === 'created') {
      uni.navigateTo({ url: '/pages/waterNeed/created' })
    } else if (type === 'detail') {
      uni.navigateTo({ url: `/pages/waterNeed/detail?id=${options.historyDemandId}` })
    }
  };

  const setList = (res) => {
    // 如果是第一页,列表数据清空
    if (res.current === '1') {
      list.value = [];
    };
    // 列表赋值
    list.value = [...list.value, ...res.data];

    // 保存总页码
    totalPages = {
      pageSize: res.pageSize,
      pages: res.pages,
      total: res.total,
    }
    if (params.pageNum < totalPages.pages) {
      params.pageNum += 1;
    }
    // 数据获取完毕，下拉刷新状态更新
    refreshing.value = false;
    // 数据全部加载完成
    if (list.value.length >= totalPages.total) {
      finished.value = true;
    } else {
      // 如果数据还有未加载部分
      finished.value = false;
    }
  };
</script>

<style lang="scss" scoped>
@import "@/assets/universal-list.scss";
</style>